<script setup lang="ts">
import {type PropType, watch} from "vue";
import { Progress } from "ant-design-vue";

type statusTypes = "normal" | "active" | "success" | "exception";

const props = defineProps({
  "percent" : {
    type: Number,
    default: 0
  },
  "status" : {
    type: String as PropType<statusTypes>,
    default: "normal"
  },
})

// 监听 props 的变化
watch(() => props.percent, (newValue) => {
  // 可以在这里处理百分比变化的逻辑
  console.log("Progress percent changed to:", newValue);
});

</script>

<template>
  <Progress
      :percent="props.percent"
      :status="props.status"
      :show-info="false"
      type="line"
  />
</template>

<style scoped>

</style>